<script>
import Logo from "./Logo.vue";

export default {
    props: ["search"],
    data() {
        return {
            searchValue: ""
        }
    },
    components: {
        Logo
    },
    methods: {
        _search() {
            const path = this.$route.path
            if (path == '/shop') {
                this.search(this.searchValue)
            } else {
                const url = this.$router.resolve("/shop?query=" + this.searchValue).href;
                window.open(url, '_blank');
            }

        },
        routeCart() {
            this.$router.push("/cart")
        }
    }
}
</script>

<template>
    <div class="item-search">
        <div class="search-wrapper">
            <input class="search-input" type="text" v-model="searchValue" />
            <!--<div class="search-suggestion"></div>-->
        </div>
        <span class="search-button" @click="_search">搜索</span>
        <span class="quick-seach">
            <span>会员享75折起</span>
            <span>黑金卡专享福利</span>
            <span>大牌同款买赠</span>
            <span>独家尖货大放送</span>
            <span>必买上新好物</span>
        </span>
    </div>
</template>

<style scoped>

.quick-seach{
    width: 90%;
    font-size: 12px;
    color: #666;
    & span{
        margin: 0 6px 0 0;
        cursor: pointer;

        &:hover{
            color: red;
        }
    }    
}

.item-search {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.search-button {
    display: inline-block;
    height: 36px;
    width: 10%;
    text-align: center;
    line-height: 36px;
    font-size: 15px;
    background-color: black;
    color: white;
    cursor: pointer;
}

.search-wrapper {
    width: 90%;
    position: relative;
}

.search-suggestion {
    position: absolute;
    border: solid black 1px;
    width: 100%;
}


.search-input {
    display: inline-block;
    height: 36px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
}
</style>